<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>WebSocket Test</title>
      <script type="text/javascript">
		var websocket = null;
		var url = "ws://localhost:9999/websocket";
		//判断当前浏览器是否支持WebSocket
		if ("WebSocket" in window){
			//打开一个WebSocket连接
			websocket = new WebSocket(url);
		} else {
			alert("您的浏览器不支持WebSocket!");
		}
		
		//连接成功建立的回调方法
		websocket.onopen = function(event){
			setMessage("WebSocket连接成功！");
			//websocket.send("Hello WebSocket!");
		}
	
		//接收到消息的回调方法 
		websocket.onmessage = function (event){
			if(typeof event.data == 'string'){
				var msg = event.data;
				if(msg.endsWith(".png") || msg.endsWith(".jpeg")){//图片url
					var img = document.createElement("img");
					img.src = msg;
					document.getElementById("message").appendChild(img);
				} else if(msg.endsWith(".mp3") || msg.endsWith(".wav") || msg.endsWith(".ogg")){//语音url
					var audio = document.createElement("audio");
					audio.src = msg;
					audio.controls = true;
					document.getElementById("message").appendChild(audio);
				} else {//文本消息
					setMessage(msg);
				}
			}
		}
	
		//关闭WebSocket
		websocket.onclose = function(event){
		   setMessage("WebSocket连接关闭！");
		}
		
		//连接发生错误的回调方法
		websocket.onerror = function(event){
		   setMessage("连接发生了错误！");
		}
		
		//发送文本消息到服务器
		function sendMsg(){
			if (websocket.readyState == 1){ //0-CONNECTING;1-OPEN;2-CLOSING;3-CLOSED  
				var msg = document.getElementById('text').value;
				if(msg)	websocket.send(msg);
				document.getElementById("text").value= "";
				document.getElementById('text').focus();
			} else {    
				alert("websocket connection closed!");
			}    
		}
		
		//发送图片或音频文件到服务器
		function sendFile(){
			if (websocket.readyState == 1){ //0-CONNECTING;1-OPEN;2-CLOSING;3-CLOSED  
				var inputElement = document.getElementById("file");
				var fileList = inputElement.files;
				for ( var i = 0; i < fileList.length; i++) {
					//发送文件名
					//websocket.send(fileList[i].name);
		　　　　　　var reader = new FileReader();
					//以二进制形式读取文件
					reader.readAsArrayBuffer(fileList[i]);
					//文件读取完毕后该函数响应
					reader.onload = function loaded(event) {
						var binaryString = event.target.result;
						//发送二进制字符串数组
						websocket.send(binaryString);
					}
				}
			} else {    
				alert("websocket connection closed!");
			}    
		}
		
		//将消息显示在页面上
		function setMessage(msg){ 
			document.getElementById('message').innerHTML += msg + '<br/>';
		}
		
		//清空页面上的消息
		function clearMsg(){
			document.getElementById('message').innerHTML = "";
		}
		
		//关闭连接
		function closeWebSocket(){
			if(websocket != null) websocket.close();
		}
		
		//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
		window.onbeforeunload = function(){
			closeWebSocket();
		}
      </script>
   </head>
   <body>
		<h3>WebSocket Demo</h3>
		<input id="text" type="text"/>
		<button onclick="sendMsg()">发送消息</button>
		<button onclick="clearMsg()">清空消息</button>
		<button onclick="closeWebSocket()">关闭 WebSocket</button><br/>
		<input id="file" type="file" multiple />
		<button onclick="sendFile()">发送图片或语音</button>
		<div id="message"></div>
   </body>
</html>